<template>
	<view>
			<view class="" style="display: flex;margin:30upx 70upx;color: #ccc;justify-content: space-around;">
				<view :class="{active:isActive}" @click="Aclick">
					产品图
				</view>
				<view :class="{active:isActive1}" @click="Aclick1" style="margin: 0upx 40upx 0upx 60upx;">
					文化图
				</view>
				<view :class="{active:isActive2}" @click="Aclick2" style="margin: 0upx 60upx 0upx 40upx;">
					创意图
				</view>
				<view :class="{active:isActive3}" @click="Aclick3">
					活动图
				</view>
			</view>
			
			<view class="waterfall" style="column-count: 2;column-gap: 14upx;">
				
				<view v-show="ischanpin" class="item" v-for="(item,index) in obj1" :key='index'>
					<image style="width: 100%;" :src="item.image" mode="widthFix" @click="pImage(item.image,index)"></image>
				</view>
				<view v-show="iswenhua" class="item" v-for="(item,index) in obj2" :key='index'>
					<image style="width: 100%;" :src="item.image" mode="widthFix" @click="pImage(item.image,index)"></image>
				</view>
				<view v-show="ischuangyi" class="item" v-for="(item,index) in obj3" :key='index'>
					<image style="width: 100%;" :src="item.image" mode="widthFix" @click="pImage(item.image,index)"></image>
				</view>
				<view v-show="ishuodong" class="item" v-for="(item,index) in obj4" :key='index'>
					<image style="width: 100%;" :src="item.image" mode="widthFix" @click="pImage(item.image,index)"></image>
				</view>
			</view>
			
			<uni-load-more :loadingType="loadingType" :contentText="contentText"></uni-load-more>
		</view>
</template>

<script>
	import uniLoadMore from '@/components/uni-load-more.vue';
	export default {
		components: {
			uniLoadMore
		},
		data() {
			return {
				obj1: [],
				obj2: [],
				obj3: [],
				obj4: [],
				material: [],
				list: [],
				iswenhua: false,
				ischuangyi: false,
				ischanpin : true,
				ishuodong : false,
				isActive : true,
				isActive1 : false,
				isActive2 : false,
				isActive3 : false,
				user_id: '',
				res: [],
				material_id: 1,
				
				loadingText: '加载中...',
				loadingType: 0,
				contentText: {
					contentdown: '上拉显示更多',
					contentrefresh: '正在加载...',
					contentnomore: '没有更多数据了'
				},
				page: 1,
				timer:{},
			}
		},
		onLoad() {
			uni.getStorage({
				key: 'user_id',
				success: (res) => {
				 this.user_id = res.data
				 this.setajax()
				},
			});
		},
		// 上拉加载
		onReachBottom(){
			if (this.timer != null) {
				clearTimeout(this.timer)
			}
			this.timer = setTimeout(()=> {
				this.getmorenews()
			}, 1000);
		},
		methods: {
			setajax(){
				let o = this
				uni.request({
					url: 'https://cx.mingmeijt.com/Api/Material/index',
					method: 'POST',
					data:{
						user_id: this.user_id,
						material_id: this.material_id,
						session_id: uni.getStorageSync("sessionid")
					},
					header:{'Content-Type':'application/x-www-form-urlencoded'},
					success: res => {
						if(res.data.code == 999){
							uni.navigateTo({
								url:'/pages/999/999'
							})
						};
						if(res.data.code == 998){
							uni.navigateTo({
								url:'/pages/login/login'
							})
						}
					let obj = res.data.data.list.list
					for(var i=0; i<obj.length; i++) {
						obj[i].image = 'https://cx.mingmeijt.com' + obj[i].image
					}
					
					o.obj1 = obj
					o.obj2 = obj
					o.obj3 = obj
					o.obj4 = obj
					},
					fail: () => {},
					complete: () => {}
				});
			},
			getmorenews() {
				let o = this
				this.page++;//每触底一次 page +1
				if (this.loadingType !== 0) {//loadingType!=0;直接返回
					return false;
				}
				this.loadingType = 1;
				uni.showNavigationBarLoading();//显示加载动画
				uni.request({
					url:'https://cx.mingmeijt.com/Api/Material/index?p=' + this.page,
					method: 'POST',
					data: {
						user_id: this.user_id,
						material_id: this.material_id,
						session_id: uni.getStorageSync("sessionid")
					},
					header:{'Content-Type':'application/x-www-form-urlencoded'},
					success: function(res) {
						if(res.data.code == 999){
							uni.navigateTo({
								url:'/pages/999/999'
							})
						};
						if (res.data.data.list.list == '' || res.data.data.list.list == null) {//没有数据
							o.loadingType = 2;
							uni.hideNavigationBarLoading();//关闭加载动画
							return;
						}
						var tpcList = res.data.data.list.list
						for(var i=0; i<tpcList.length; i++) {
							tpcList[i].image = 'https://cx.mingmeijt.com' + tpcList[i].image
						}
						o.obj1 = o.obj1.concat(tpcList);//将数据拼接在一起
						o.obj2 = o.obj1.concat(tpcList);//将数据拼接在一起
						o.obj3 = o.obj1.concat(tpcList);//将数据拼接在一起
						o.obj4 = o.obj1.concat(tpcList);//将数据拼接在一起
						o.loadingType = 0;//将loadingType归0重置
						uni.hideNavigationBarLoading();//关闭加载动画
					}
				});
			},
			Aclick : function(){
				this.ischanpin = true
				this.iswenhua = false
				this.ischuangyi = false
				this.ishuodong = false
				this.isActive = true
				this.isActive1 = false
				this.isActive2 = false
				this.isActive3 = false
				this.material_id = 1
				this.setajax()
			},
			Aclick1 : function(){
				this.ischanpin = false
				this.iswenhua = true
				this.ischuangyi = false
				this.ishuodong = false
				this.isActive = false
				this.isActive1 = true
				this.isActive2 = false
				this.isActive3 = false
				this.material_id = 2
				this.setajax()
			},
			Aclick2 : function(){
				this.ischanpin = false
				this.iswenhua = false
				this.ischuangyi = true
				this.ishuodong = false
				this.isActive = false
				this.isActive1 = false
				this.isActive2 = true
				this.isActive3 = false
				this.material_id = 3
				this.setajax()
			},
			Aclick3 : function(){
				this.ischanpin = false
				this.iswenhua = false
				this.ischuangyi = false
				this.ishuodong = true
				this.isActive = false
				this.isActive1 = false
				this.isActive2 = false
				this.isActive3 = true
				this.material_id = 4
				this.setajax()
			},
			pImage (img,index) {
				console.log(img,index)
				uni.previewImage({
					current: index,
					urls: [img],
					longPressActions: {
						success: function(data) {
							console.log(data)
						},
						fail: function(err) {}
					},
				})
			},
			saveImgToLocal(img){
				uni.downloadFile({
					url: img,//图片地址
					success: (res) =>{
						var imgpath = res.tempFilePath;
						if (res.statusCode === 200){
							
							uni.getSetting({
							   success(res) {
									 if (res.authSetting['scope.writePhotosAlbum'] != undefined && res.authSetting['scope.writePhotosAlbum'] == false) {
											//显示自定义弹框，第一次进来不显示自定义
											// that.setData({
											// 	userauth: true
											// });
											uni.hideLoading();
										} else {
											uni.saveImageToPhotosAlbum({
												filePath: imgpath,
												success: function(res) {
													uni.hideLoading();
													uni.showToast({
														title: '保存成功！'
													})
												},
												fail: function(res) {
													uni.hideLoading();
													uni.showToast({
														title: '保存失败！'
													})
												}
											})
									 }
							   }
							})
							
							// uni.saveImageToPhotosAlbum({
							// 	filePath: res.tempFilePath,
							// 	success: function() {
							// 		uni.showToast({
							// 			title: "保存成功",
							// 			icon: "none"
							// 		});
							// 	},
							// 	fail: function() {
							// 		uni.showToast({
							// 			title: "保存失败",
							// 			icon: "none"
							// 		});
							// 	}
							// });
							
						} 
					}
				})
			}
		}
	}
</script>

<style>
	page {
	 background-color: #fff;
	}
	.active {
		border-bottom: 5upx solid #000;
		color: #000;
	}
	
	.waterfall {
		width: 100%;
		margin: 0 auto;
		column-width: auto;
	}
	
	.item {
		break-inside: avoid;
		overflow: hidden;
		border-radius: 4upx;
	}
	
	.image {
		width: 100%;
		display: block;
		background: #ffffff;
	}
	
</style>
